<template>
    <GlobalHeader
      :text="t('hyg.pumpOperatingParameters')"
      xh="CW6250C1360DF7"
      xlh="2522L000026"
      :hour="null"
      path="`/pages/rhost/rhost?props=${3}`"
    ></GlobalHeader>
    <view style="color: #fff; display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px;height: 70%; overflow-y: auto;width: 100%; overflow-x: hidden;">
      <view class="dataList" v-for="(item, index) in hyb" :key="index">
        <view  style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <view >
            <text>{{ t('hyg.pumpBody') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(601, index, 1)) }}℃</text>
          </view>
          <view>
            <text>{{ t('hyg.frontBearing') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(602, index, 1)) }}℃</text>
          </view>
          <view>
            <text>{{ t('hyg.rearBearing') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(603, index, 1)) }}℃</text>
          </view>
          <view>
            <text>{{ t('hyg.pumpShaft') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(604, index, 1)) }}℃</text>
          </view>
          <view>
            <text>{{ t('hyg.pumpInlet') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(605, index, 2)) }}bar</text>
          </view>
          <view>
            <text>{{ t('hyg.pumpOutlet') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(606, index, 2)) }}bar</text>
          </view>
          <view>
            <text>累时:</text>
            <text>{{ isEmptyToCharacter(hybData(607, index, 0)) }}h</text>
          </view>
        </view>
        <view class="equipImg">
          <view style="position: relative">
            <image :src="huoyou" style="width: 100%; height: 100%" />
            <BlinkingLight
              v-if="Lighthyb(hybData(606, index, 2))"
              :isBlinking="false"
              :position="true"
              :top="35"
              :left="93"
              :customStyle="{ width: '35px', height: '35px' }"
            ></BlinkingLight>
          </view>
          <text>{{ item.text }}</text>
        </view>
      </view>

     
        <view class="dataList" style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <view>
            <text>{{ t('hyg.pumpBody') }}:</text>
            <text>{{ isEmptyToCharacter(scbData(625, 1)) }}℃</text>
          </view>
          <view>
            <text>{{ t('public.bearing') }}:</text>
            <text>{{ isEmptyToCharacter(scbData(626, 1)) }}℃</text>
          </view>
          <view>
            <text>{{ t('hyg.pumpShaft') }}:</text>
            <text>{{ isEmptyToCharacter(scbData(627, 1)) }}℃</text>
          </view>
          <view>
            <text>{{ t('hyg.pumpInlet') }}:</text>
            <text>{{ isEmptyToCharacter(scbData(629, 2)) }}bar</text>
          </view>
          <view>
            <text>{{ t('hyg.pumpOutlet') }}:</text>
            <text>{{ isEmptyToCharacter(scbData(630, 2)) }}bar</text>
          </view>
          <view>
            <text>累时:</text>
            <text>{{ isEmptyToCharacter(scbData(631, 2)) }}h</text>
          </view>
		  <view class="equipImg">
		    <view style="position: relative">
		      <image :src="huoyou" style="width: 100%; height: 100%" />
		      <BlinkingLight
		        v-if="Lighthyb(scbData(630, 2))"
		        :isBlinking="false"
		        :position="true"
		        :top="35"
		        :customStyle="{ width: '35px', height: '35px' }"
		        :left="93"
		      ></BlinkingLight>
		    </view>
		    <text>{{ t('hyg.sweepingPump') }}</text>
		  </view>
        </view>
      


      <view class="dataList" v-for="(item, index) in yzb" :key="index">
        <view style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
          <view>
            <text>{{ t('hyg.pumpBody') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(633, index, 1)) }}℃</text>
          </view>
          <view>
            <text>{{ t('public.bearing') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(634, index, 1)) }}℃</text>
          </view>
          <view>
            <text>{{ t('hyg.pumpShaft') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(635, index, 1)) }}℃</text>
          </view>
          <view>
            <text>{{ t('hyg.pumpOutlet') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(638, index, 2)) }}bar</text>
          </view>
          <view>
            <text>{{ t('public.vTime') }}:</text>
            <text>{{ isEmptyToCharacter(hybData(639, index, 2)) }}h</text>
          </view>
        </view>
        <view class="equipImg">
          <view style="position: relative">
            <image :src="yalizai" style="width: 100%; height: 100%" />
            <BlinkingLight
              v-if="Lighthyb(hybData(638, index, 2))"
              :isBlinking="false"
              :position="true"
              :top="55"
              :left="140"
              :customStyle="{ width: '35px', height: '35px' }"
            ></BlinkingLight>
          </view>
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>

</template>

<script setup>
import GlobalHeader from "@/components/layout/GlobalHeader.vue";
import { initDecimalPlaces } from '@/utils/utils.js'
import { isEmptyToCharacter } from '@/plugins/index.js'
import huoyou from '@/assets/images/huoyou.png'
import yalizai from '@/assets/images/yalizai.jpg'
import BlinkingLight from '@/components/lightradius.vue'
import { useI18n } from 'vue-i18n'
import { ref, computed, watch, inject } from 'vue'

const Lighthyb = computed(() => {
  return (value) => {
    return value > 3 ? true : false
  }
})

const { t } = useI18n()
let allData = inject('allData')
let pumpDataList = ref(null)
let hyb = ref([
  { text: `1#${t('hyg.cargoOilPump')}`, num: 8, sort: 601, time: 'z607' },
  { text: `2#${t('hyg.cargoOilPump')}`, num: 8, sort: 609, time: 'z615' },
  { text: `3#${t('hyg.cargoOilPump')}`, num: 8, sort: 617, time: 'z623' }
])
let yzb = ref([
  { text: `1#${t('hyg.ballastPump')}`, num: 8, sort: 633, time: 'z639' },
  { text: `2#${t('hyg.ballastPump')}`, num: 8, sort: 641, time: 'z647' }
])
let h = ref(0)

let hybData = computed(() => {
  return (sort, index, n) => {
    let sorts = 'z' + (sort + index * 8)
    if (!pumpDataList.value) return initDecimalPlaces(n)
    return pumpDataList?.value[sorts]?.currentValue || initDecimalPlaces(n)
  }
})

let scbData = computed(() => {
  return (sort, n) => {
    let sorts = 'z' + sort
    if (!pumpDataList.value) return initDecimalPlaces(n)
    return pumpDataList?.value[sorts]?.currentValue || initDecimalPlaces(n)
  }
})

// onBeforeRouteUpdate((to) => {

// })

watch(
  () => allData.value,
  (newVal, oldVal) => {
    let pumpInitData = newVal.hyb || {}
    pumpDataList.value = pumpInitData
  },
  {
    deep: true
  }
)
</script>

<style scoped lang="scss">

 .dataList {
 border: 1px solid #ccc;

 }

  view {
    margin: 7px 0;
  }

  text {
    display: inline-block;
  }

  text:nth-child(1) {
    width: 100px;
  }

  text:nth-child(2) {
    text-align: right;
    width: 80px;
  }

  .equipImg {
    width: 200px;
   // height: 250px;
    /* background: #000; */
    text-align: center;
	margin: auto;
    view {
      height: 150px;
      width: 100%;
    }
  }
</style>